<template>
  <el-dialog v-drag2anywhere title="请选择要关联的进项明细" :visible.sync="dialogVisible" width="1500px"
    :close-on-click-modal="false" append-to-body :modal-append-to-body="false" @close="dialogVisible=false">

    <el-form :model="filterData" ref="filterForm" label-width="0px" size="mini">
      <el-row :gutter="20">
        <el-col style="width: 200px;">
          <el-form-item label="">
            <el-select v-model="filterData.type" placeholder="发票类型">
              <el-option label="普通发票" value="普通发票"></el-option>
              <el-option label="增值税专用发票" value="增值税专用发票"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col style="width: 240px;">
          <el-form-item label="">
            <el-input v-model="filterData.num" placeholder="进项发票号码" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col style="width: 240px;">
          <el-form-item label="">
            <el-input v-model="filterData.title" placeholder="货物名称" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col style="width: 200px;">
          <el-form-item label="">
            <el-input v-model="filterData.model" placeholder="规格型号" clearable></el-input>
          </el-form-item>
        </el-col>

        <el-col style="width: 200px;">
          <el-form-item label="">
            <el-input v-model="filterData.seller" placeholder="销方单位" clearable></el-input>
          </el-form-item>
        </el-col>

        <el-col style="width: 200px;">
          <el-form-item label="">
            <el-input v-model="filterData.buyer" placeholder="购方单位" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col style="width: 100px;">
          <el-form-item label="">
            <el-button type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <div style="line-height: 30px; text-align: right; height:30px; color: #00aaff;">溫馨提示:请根据实际情况勾选进项票</div>
          <div style="height: 300px; overflow-y: auto;border: 1px solid #E3E3E3; ">
            <el-table :data="tableData" ref="tableData" border style="width: 100%;" height="100%"
              @selection-change="handleSelectionChange" @select="handleCheckedChanged">
              <el-table-column label="选择" type="selection" width="45px" align="center"></el-table-column>
              <el-table-column label="开票日期" prop="date" width="85px"></el-table-column>
              <el-table-column label="销方单位" prop="seller" show-overflow-tooltip></el-table-column>
              <el-table-column label="类型" prop="type" width="90px" align="center">
                <template v-slot="scope">
                  {{scope.row.type==1? "普票":"专票"}}
                  ({{scope.row.rate*100}}%)
                </template>
              </el-table-column>
              <el-table-column label="发票号码" prop="num" width="160px" show-overflow-tooltip></el-table-column>

              <el-table-column label="税收类目及名称" prop="taxname" width="150px" show-overflow-tooltip>
                <template v-slot="scope">
                  *{{scope.row.taxname}}*{{scope.row.title}}
                </template>
              </el-table-column>
              <el-table-column label="规格型号" prop="model" width="100px" show-overflow-tooltip></el-table-column>
              <el-table-column label="单位" prop="unit" width="50" align="center" show-overflow-tooltip></el-table-column>
              <el-table-column label="数量" prop="count" width="80" align="center"></el-table-column>
              <el-table-column label="单价" if="false" prop="price" align="right" width="120px" v-if="false">
                <template slot="header">
                  <div style="text-align: center;">单价</div>
                </template>
              </el-table-column>
              <el-table-column label="金额" prop="sum" align="center" width="95px"></el-table-column>
              <el-table-column label="税额" v-if="false" prop="tax" align="center" width="80px"></el-table-column>
              <el-table-column label="可绑金额" prop="unbindsum" align="center" width="95px"></el-table-column>

              <el-table-column label="绑定金额" align="center" width="150px">
                <template slot="header">
                  <div style="color: #FF0000">绑定金额</div>
                </template>
                <template v-slot="scope">
                  <span v-if="!scope.row.dcheck">/</span>
                  <el-input-number v-if="scope.row.dcheck" :precision="2" :step="0.01"
                    :max="parseFloat(scope.row.unbindsum)" size="mini" style="width: 100%;" v-model="scope.row.readysum"
                    placeholder="金额" @change="handleDsumChange"></el-input-number>
                </template>
              </el-table-column>
              <el-table-column label="备注" align="center">
                <template slot="header">
                  <div style="color: #FF0000">备注</div>
                </template>
                <template v-slot="scope">
                  <span v-if="!scope.row.dcheck">/</span>
                  <el-input v-if="scope.row.dcheck" type="textarea" :rows="1" v-model="scope.row.dmemo"
                    placeholder="备注"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="购方单位" prop="buyer" show-overflow-tooltip></el-table-column>

            </el-table>
          </div>
          <div>
            <div style="height: 30px; line-height: 30px;">选中项总金额: {{sum_select}}</div>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <div style="text-align: right;">
      <el-pagination layout=" prev, pager,next,sizes,total" :total="numrows" :page-size="pagesize"
        :current-page="curpage" prev-text="上一页" next-text="下一页" :page-sizes="[10, 20, 30]"
        @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false" size="medium">取 消</el-button>
      <el-button type="primary" size="medium" @click="handleSave" :disabled="selection.length<=0">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    data() {
      return {
        filterData: {
          num: '',
          seller: '',
          buyer: '',
          title: '',
          model: '',
          type: '',
        },
        sum_select: 0,
        numrows: 1,
        curpage: 1,
        pagesize: 10,
        selection: [],
        tableData: [],
        dialogVisible: false
      }
    },
    methods: {
      handleCountChange(index, data) {
        this.tableData[index].readysum = parseFloat((data.price * data.dcount) + (data.price * data.rate * data.dcount))
          .toFixed(2);
        this.handleCheckedChanged(this.selection);
      },
      initData(seller,buyer) {
        this.filterData = {
            title: '',
            num: '',
            seller:seller,
            buyer:buyer,
            model: '',
            supname: ''
          },
          this.loadDataList();
      },
      handleDsumChange(val) {
        console.log(val);
        this.sum_select = 0;
        for (var i = 0; i < this.selection.length; i++) {
          var index = this.tableData.indexOf(this.selection[i]);
          this.tableData[index].dcheck = true;
          this.sum_select += parseFloat(this.tableData[index]["readysum"]);
        }
        this.sum_select = parseFloat(this.sum_select).toFixed(2);
      },
      handleSelectionChange(selection) {
        this.selection = selection;
        this.handleCheckedChanged(this.selection);
      },
      handleCheckedChanged(selection) {
        for (var i = 0; i < this.tableData.length; i++) {
          this.tableData[i].dcheck = false;
        }
        this.sum_select = 0;
        for (var i = 0; i < selection.length; i++) {
          var index = this.tableData.indexOf(selection[i]);
          this.tableData[index].dcheck = true;
          this.sum_select += parseFloat(this.tableData[index]["readysum"]);
        }

        this.sum_select = parseFloat(this.sum_select).toFixed(2);

      },
      loadDataList() {
        const params = {
          type: this.filterData.type,
          title: this.filterData.title,
          model: this.filterData.model,
          num: this.filterData.num,
          seller: this.filterData.seller,
          buyer: this.filterData.buyer,
          curpage: this.curpage,
          pagesize: this.pagesize
        }
        this.axios.post("api/admin/buyticketdetail/popup_buyticket_unbind", params).then(res => {
          if (res.status == 200 && res.data.code) {
            this.tableData = res.data.list;
            this.numrows = res.data.numrows;
          }
        })
      },
      handleSearch() {
        this.curpage = 1;
        this.loadDataList();
      },
      handleSave() {
        //获取已经选中数据
        const list = [];
        this.tableData.forEach((item) => {
          if (item["dcheck"]) {
            list.push(item);
          }
        })
        this.$emit("completeHandler", list);
        this.dialogVisible = false;
      },
      handleSizeChange: function(val) {
        this.pagesize = val;
        this.curpage = 1;
        this.loadDataList();
      },
      handleCurrentChange: function(val) {
        this.curpage = parseInt(val);
        this.loadDataList();
      },
    }
  }
</script>

<style>
</style>
